<template>
    <el-card class="" style="text-align: right;">
        <div slot="header" class="clearfix" >
            <!-- <el-date-picker
                v-model="value2"
                type="monthrange"
                align="right"
                size="mini"
                unlink-panels
                range-separator="至"
                start-placeholder="开始月份"
                end-placeholder="结束月份"
                value-format="yyyy-MM"
                :picker-options="pickerOptions">
            </el-date-picker> -->
            <el-date-picker v-model="value2" type="month"  size="mini" value-format="yyyy-MM" placeholder="选择月">
            </el-date-picker>
            <el-button :loading="loading" type="primary" size="mini" @click="submitForm" style="margin-left: 10px;">查询</el-button>
            <el-button @click="cancel" size="mini">重置</el-button>
        </div>

        <div class="body">
            <div class="chart" ref="charts" style="height:300px;width:100%;" />
        </div>
    </el-card>
</template>

<script>

import echarts from 'echarts'
require('echarts/theme/macarons')
import resize from '@/views/dashboard/components/mixins/resize'

export default {
    mixins: [resize],
    name: "question",
    data() {
        return {
            chart: null,
            loading: false,
            // pickerOptions: {
            //     shortcuts: [{
            //         text: '本月',
            //         onClick(picker) {
            //         picker.$emit('pick', [new Date(), new Date()]);
            //         }
            //     }, {
            //         text: '今年至今',
            //         onClick(picker) {
            //         const end = new Date();
            //         const start = new Date(new Date().getFullYear(), 0);
            //         picker.$emit('pick', [start, end]);
            //         }
            //     }, {
            //         text: '最近六个月',
            //         onClick(picker) {
            //         const end = new Date();
            //         const start = new Date();
            //         start.setMonth(start.getMonth() - 6);
            //         picker.$emit('pick', [start, end]);
            //         }
            //     }]
            // },
            value2: ''
        }
    },
    watch: {
        chartData: {
            deep: true,
            handler(val) {
                // this.initChart();
            }
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.initChart()
        })
    },
    methods:{
        initChart() {
            this.chart = echarts.init(this.$refs['charts'], 'macarons');
            var times = ['A部门1','B部门2','C部门3','C部门4','D部门5','E部门6'];
            var data1s = [38, 39, 67, 101, 201, 67];
            var data2s = [94.1,93.8,87.2,89,87,96];
            this.setOptions(times, data1s, data2s)
        },
        getGradientColor(color11, color22){
            return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {offset: 0, color: color11},
                {offset: 1, color: color22}]) ;
        },
        submitForm() {
            alert(this.value2);
        },
        cancel() {
            this.value2 = '';
        },
        setOptions(times, barData, lineData) {
            var barWidth = 30;
            var maxVal = Number(Math.max(...barData));
            var minVal = Number(Math.min(...barData));
            this.chart.setOption({
                title: {
                    text: '月度考试',
                    left:'center'
                },
                tooltip: {
                    trigger: "axis",
                    textStyle: {
                        align: 'left'
                    }
                },
                grid: {
                    left: "5",
                    right: "10",
                    top: "15%",
                    bottom: "2%",
                    containLabel: true,
                },
                legend: {
                    data: ['报名人数', '通过率'],
                    left: '10%',
                    show: false
                },
                xAxis: {
                    name: '',
                    data: times,
                    axisPointer: {
                        type: 'shadow'
                    },
                    nameTextStyle: {
                        color: '#2683CB',
                        fontSize: '14',
                        fontWeight: '400',
                        padding: [20, 0, 0, 0]
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#1F8BC6',
                            width: 1,
                            opacity: 0.3
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#2683CB',
                            fontSize: '14',
                            fontWeight: '400',
                        },
                    },
                },
                yAxis: [
                    {
                        name: '报名人数',
                        max: maxVal,
                        interval: maxVal/5,
                        axisLine: {
                            show: false
                        },
                        nameTextStyle: {
                            color: '#2583CB',
                            fontSize: '14',
                            fontWeight: '400',
                            padding: [0, 0, 0, 0]
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#1F8BC6',
                                width: 1,
                                opacity: 0.3
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#2683CB',
                                fontSize: '14',
                                fontWeight: '400',
                            },
                        }
                    },
                    {
                        name: '通过率',
                        interval: 20,
                        axisLine: {
                            show: false
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#2683CB',
                                fontSize: '14',
                                fontWeight: '400',
                            },
                            formatter: '{value} %'
                        },
                        splitLine: {
                            show: false,
                            lineStyle: {
                                color: '#1F8BC6',
                                width: 1,
                                opacity: 0.3
                            }
                        },
                    }
                ],
                series: [
                    {
                        // z: 1,
                        name: '报名人数',
                        type: "bar",
                        barWidth: barWidth,
                        barGap: "0%",
                        data: barData,
                        itemStyle: {
                            normal: {
                                // color: this.getGradientColor('#4EBDE3', '#3E82DF'),
                                color: "#F27B39"
                            },
                        },
                    },
                    // {
                    //     z: 2,
                    //     name: '报名人数',
                    //     type: "pictorialBar",
                    //     data: barData,
                    //     tooltip: { show: false },
                    //     symbol: "diamond",
                    //     symbolOffset: ["0%", "50%"],
                    //     symbolSize: [barWidth, 10],
                    //     itemStyle: {
                    //         normal: {
                    //             color: '#4EBDE3',
                    //         },
                    //     },
                    // },
                    // {
                    //     z: 3,
                    //     name: '报名人数',
                    //     type: "pictorialBar",
                    //     symbolPosition: "end",
                    //     data: barData,
                    //     tooltip: { show: false },
                    //     symbol: "diamond",
                    //     symbolOffset: ["0%", "-60%"],
                    //     symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
                    //     itemStyle: {
                    //         normal: {
                    //             borderColor: '#4AA8E3',
                    //             borderWidth: 2,
                    //             color: '#4AA8E3',
                    //         },
                    //     },
                    // },
                    {
                        name: '通过率',
                        type: 'line',
                        yAxisIndex: 1,
                        data: lineData,
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + ' °C';
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: "#E4A824"
                            },
                        },
                    }
                ]
            })
        }
    }
}

</script>
